<template>
    <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
        
        <el-table-column align="center" prop="unid" label="id" width="180">
        </el-table-column>
        <el-table-column align="center" prop="username" label="用户名">
        </el-table-column>
        <el-table-column align="center" prop="nickname" label="昵称">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="手机号">
        </el-table-column>
        <el-table-column align="center" prop="vipLevel" label="vip等级">
            <template #default="{ row }">
                <b v-if="row.vipLevel == 1">普通会员</b>
                <b v-else-if="row.vipLevel == 2">黄金会员</b>
                <b v-else-if="row.vipLevel == 3">钻石会员</b>
                <b v-else>不是会员</b>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="vipStamp" label="vip到期时间">
            <template #default="{ row }">
                <b>已过期</b>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="sex" label="性别">
            <template #default="{ row }">
                <b v-if="row.sex == 1">男</b>
                <b v-else>女</b>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, onMounted } from "vue"

import { getUsersListApi } from "../../api/users";


let tableData = ref([])



let tableLoading = ref(false)

let getUsersList = async () => {
    tableLoading.value = true
    try {
        let res = await getUsersListApi()
        tableData.value = res.data.data
        console.log(res.data)
        tableLoading.value = false;
    } catch (e) {
        console.log(e)
        tableLoading.value = false;
    }
}



onMounted(() => {
    getUsersList()
})


</script>